<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript" src="js/jquery.js"></script>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test for select box</title>
</head>
<?php
	if(!empty($_POST) ) {
    	echo "<pre>";
		var_dump($_POST);
		echo "<pre>";		
    }
?>
<body>

<form action="" name="" method="post">
	<select id="left-select" name="source" size="5" style="width:200px; height:100px">
    	<option value="1">calendar</option>
        <option value="2">shopping cart</option>
        <option value="3">cd</option>
        <option value="4">email</option>
        <option value="5">FAQ</option>	
        <option value="6">email6</option>
        <option value="7">FAQ7</option>
    </select>
    
   
    
    <input id="toright" type="button" value="To Right" />
    <input id="toleft" type="button" value="To Left"/>
    
    <select id="right-select-hidden" name="destination[]" multiple="multiple" style="width:200px; height:100px; display:none"></select>
    <select id="right-select" name="select2" size="5" style="width:200px; height:100px"></select>
    <br/><br/><br/><br/>
    <input type="submit" value="Submit" />
</form>
    <script type="text/javascript">
		
		$(document).ready(function(){
			$('#toright').click(function(){												
				//Left Select Box
				var e 			= document.getElementById("left-select");
				var selectIndex = e.options[e.selectedIndex].value;								
				var selectValue = e.options[e.selectedIndex].text;
				
				//Right Select Box
				var f			= document.getElementById("right-select");
				var found 		= false;		
				for(i=0; i<f.length; i++){
					if(f.options[i].value == selectIndex){
						found = true;
						break;
					}
				}
				
				//If found, add left selection to the right Select Box
				if(found == false){
					$('#right-select').append('<option value="'+selectIndex+'">'+selectValue+'</option>');
					$('#right-select-hidden').append('<option selected="selected" value="'+selectIndex+'">'+selectValue+'</option>');
				}else{//Else, notice that this exists
					alert('This choice is already exists!');	
				}
				
				//Uncheck the selection of Left Select Box				
				document.getElementById("left-select").selectedIndex = -1;				
			});
			
			$('#toleft').click(function(){				
				//Right Select Box
				var f			= document.getElementById("right-select");//get right select box object			
				var selectIndex = f.options[f.selectedIndex].value;//get value of option is being selected
				$("#right-select-hidden option[value='"+selectIndex+"']").remove();//remove from hidden select box
				$("#right-select option:selected").remove();//remove from right select box
			});
		});
	</script>
</body>
</html>
